<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mi.com</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/mi.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="../font/css/font-awesome.min.css">
   
    <script type="text/javascript" src="js/switchover.js"></script>
</head>

<body>
    <div class="layout-container">
        <!-- 顶部 -->
        <div class="header">
            <!-- 顶部上 -->
            <div class="layout-wrapper header-top">
                <div class="layout-wrapper header-top-container">
                    <!-- 顶部导航条 -->
                    <div class="header-top-nav left">
                        <a href="">小米商城</a>
                        <sapn class="sep">|</sapn>
                        <a href="">MIUI</a>
                        <sapn class="sep">|</sapn>
                        <a href="">loT</a>
                        <sapn class="sep">|</sapn>
                        <a href="">云服务</a>
                        <sapn class="sep">|</sapn>
                        <a href="">天星科技</a>
                        <sapn class="sep">|</sapn>
                        <a href="">有品</a>
                        <sapn class="sep">|</sapn>
                        <a href="">小爱开放平台</a>
                        <sapn class="sep">|</sapn>
                        <a href="">企业团购</a>
                        <sapn class="sep">|</sapn>
                        <a href="">资质证照</a>
                        <sapn class="sep">|</sapn>
                        <a href="">协议规则</a>
                        <sapn class="sep">|</sapn>
                        <a href="">下载app</a>
                        <sapn class="sep">|</sapn>
                        <a href="">智能生活</a>
                        <sapn class="sep">|</sapn>
                        <a href="">Select&nbsp;Location</a>
                    </div>
                    <!-- 顶部购物车 -->
                    <div class="header-top-car right">
                        <a href="#">
                            <img src="image/gwc.png" alt="" class="gwc-before">
                            <img src="image/gwc_y.png" alt="" class="gwc-after">
                            <span>购物车</span>
                            <span>(0)</span>
                        </a>
                    </div>
                    <!-- 登录 注册 -->
                    <div class="header-top-info right">
                        <a rel="nofollow" href="#">登录</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="#">注册</a>
                        <span class="sep">|</span>
                        <span class="message">
                            <a rel="nofollow" href="#">消息通知</a>
                        </span>
                    </div>
                </div>
            </div>
            <!-- 顶部下 -->
            <div class="layout-wrapper header-bottom">
                <div class="layout-center header-bottom-center">
                    <div class="header-bottom-logo">
                        <a href="#" class="logo" title="小米官网">"小米官网"</a>
                    </div>
                    <div class="header-bottom-nav left">
                        <ul class="nav-list">
                            <li class="list-itme nav-categor">
                                <a href="#" class="list-time-a hidden"><span>全部商品分类</span></a>
                                <div class="site-category">
                                    <ul class="site-category-list">
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>手机 电话卡</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>电视 盒子</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>笔记本 显示器</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>家电 插线板</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>出行 穿戴</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>智能 路由器</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>电源 配件</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>健康 儿童</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>耳机 音响</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                        <li class="site-category-item">
                                            <a href="#" class="title">
                                                <b>生活 箱包</b>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                            <div class="site-category-item-children"></div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="list-itme"><a href="#" class="list-itme-a">小米手机</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">Redmi红米</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">电视</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">笔记本</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">家电</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">路由器</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">智能硬件</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">服务</a></li>
                            <li class="list-itme"><a href="#" class="list-itme-a">社区</a></li>
                        </ul>
                    </div>
                    <div class="header-bottom-search">
                        <form action="" class="search-form">
                            <input type="text" class="search-input" placeholder="手机">
                            <button type="submit" class="seaech-submit fa fa-search fa-lg"></button>
                        </form>

                    </div>
                </div>
            </div>

        </div>
        <!-- 轮播图部分 -->
        <div class="layout-warpper home-hero">

            <div class="layout-center home-hero-center">
                <!-- 轮播图 -->
                <div class="home-hero-swiper">
                    <dl>
                        <dt></dt>
                        <dd>
                            <a href="#"><img src="image/heisha.jpg"></a>
                        </dd>
                        <dt></dt>
                        <dd>
                            <a href="#"><img src="image/redmi-max.webp"></a>
                        </dd>
                        <dt></dt>
                        <dd>
                            <a href="#"><img src="image/redmi-k30s.webp"></a>
                        </dd>
                        <dt class="home-hero-swiper-active"></dt>
                        <dd>
                            <a href="#"><img src="image/redme-notebook.webp"></a>
                        </dd>
                    </dl>
                </div>

                <div class="home-hero-sub">
                </div>

            </div>
        </div>

        <!-- note9 -->
        <div class="layout-wrapper home-banner-box">
            <div class="layout-center home-banner-center">
                <img src="image/note9.webp" alt="">
            </div>
        </div>

        <!-- 手机 -->
        <div class="layout-warpper phone">
            <div class="layout-center phone-center">
                <div class="phone-header">
                    <h2 class="title">手机</h2>
                    <a href="#" class="more">
                        查看更多
                        <i class="fa fa-chevron-circle-right"></i>
                    </a>
                </div>
                <div class="phone-list">
                    <div class="phone-hot">
                        <img src="image/xiaomi11.webp" alt="" class="brick brick-margin-bottom">
                    </div>
                    <div class="phone-items">
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                        <div class="phone-list-item brick brick-margin">
                            <a href="#">
                                <img src="image/phone1.webp" alt="" class="item-img">
                                <h3 class="title">小米10S</h3>
                                <p class="desc">骁龙870|对称式双扬立体声</p>
                                <p class="price">
                                    <span>3299</span>
                                    <span>元</span>
                                    <span>起</span>
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 小米电视特惠 -->
        <div class="layout-wrapper home-banner-box">
            <div class="layout-center home-banner-center">
                <img src="image/banner1.webp" alt="">
            </div>
        </div>
        <!-- 家电模块 -->
        <div class="layout-warpper appliances">
            <div class="layout-center appliances-center">
                <div class="appliances-header">
                    <h2 class="title">家电</h2>
                    <div class="more">
                        <ul class="tab-list">
                            <li class="tab-list-active">热门</li>
                            <li>电视影音</li>
                        </ul>
                    </div>
                </div>
                <div class="appliances-list">
                    <div class="appliances-hot">
                        <a href="#" class="brick brick-margin-bottom">
                            <img src="image/RedmiMax98.webp" alt="">
                        </a>
                        <a href="#" class="brick brick-margin-bottom">
                            <img src="image/mi4A.webp" alt="">
                        </a>
                    </div>
                    <div class="appliances-items hot">
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/E65X.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick-margin item">
                            <div class="brick brick-margin-bottom half">
                                <a href=""></a>
                            </div>
                            <div class="half brick">
                                <a href=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="appliances-items media display-none">
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="fur">
                                    <img src="image/redmi-tv-max-98-small.webp" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="brick-margin item">
                            <div class="brick brick-margin-bottom half">
                                <a href=""></a>
                            </div>
                            <div class="half brick">
                                <a href=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 小米智能门锁 -->
        <div class="layout-wrapper home-banner-box">
            <div class="layout-center home-banner-center">
                <img src="image/banner2.webp" alt="">
            </div>
        </div>

    </div>
    <script type="text/javascript" src="js/mi.js"></script>
    <script type="text/javascript">
        // 调用 switchover.js 定义的 switchover 函数
        // 前两个参数都是选择器，后两个参数都是 class-name
        switchover('.tab-list>li', '.appliances-items','tab-list-active','display-none');
    </script>
</body>

</html>